import React, { useState, useEffect } from "react";
import TaskForm from "./components/TaskForm";
import TaskList from "./components/TaskList";
import "./App.css";

function App() {
  const [tasks, setTasks] = useState([]);

  // 从 localStorage 加载任务
  useEffect(() => {
    const savedTasks = localStorage.getItem("tasks");
    if (savedTasks) {
      setTasks(JSON.parse(savedTasks));
    }
  }, []);

  // 保存任务到 localStorage
  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  // 添加新任务
  const addTask = (text) => {
    if (text.trim() === "") {
      alert("请输入任务内容！");
      return;
    }

    const newTask = {
      id: Date.now(),
      text: text.trim(),
      completed: false,
    };
    setTasks([...tasks, newTask]);
  };

  // 删除任务
  const deleteTask = (id) => {
    setTasks(tasks.filter((task) => task.id !== id));
  };

  // 切换任务完成状态
  const toggleTask = (id) => {
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  // 编辑任务
  const editTask = (id, newText) => {
    if (newText.trim() === "") {
      alert("任务内容不能为空！");
      return;
    }
    setTasks(
      tasks.map((task) =>
        task.id === id ? { ...task, text: newText.trim() } : task
      )
    );
  };

  // 清空已完成任务
  const clearCompleted = () => {
    setTasks(tasks.filter((task) => !task.completed));
  };

  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-8">
          <div className="card shadow">
            <div className="card-header bg-primary text-white text-center">
              <h1 className="mb-0">
                <i className="bi bi-check2-square me-2"></i>
                Task Manager
              </h1>
            </div>
            <div className="card-body">
              <TaskForm onAddTask={addTask} />
              <TaskList
                tasks={tasks}
                onDeleteTask={deleteTask}
                onToggleTask={toggleTask}
                onEditTask={editTask}
              />
            </div>
            <div className="card-footer text-muted text-center">
              <div className="d-flex justify-content-between align-items-center">
                <span>
                  共 <strong>{tasks.length}</strong> 个任务， 已完成{" "}
                  <strong>
                    {tasks.filter((task) => task.completed).length}
                  </strong>{" "}
                  个
                </span>
                {tasks.some((task) => task.completed) && (
                  <button
                    className="btn btn-outline-danger btn-sm"
                    onClick={clearCompleted}
                  >
                    <i className="bi bi-trash me-1"></i>
                    清空已完成
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;
